<template>
  <div>
    <van-nav-bar title="我的收藏" left-arrow fixed @click-left="onClickLeft" />
    <div :style="{ height: '45px' }"></div>
    <van-tabs v-model="active" sticky @change="tabChange">
      <van-tab title="收藏">
        <van-swipe-cell
          v-for="(item, index) in collectList"
          class="coll-item"
          :key="index"
        >
          <van-card
            :price="item.retailPrice.toFixed(2)"
            :desc="item.brief"
            :title="item.name"
            @click="openItem(item)"
            class="goods-card"
            :thumb="item.picUrl"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              @click="delColl(item, index)"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </van-tab>
      <van-tab title="专题">
        <van-swipe-cell
          v-for="(item, index) in projectList"
          class="coll-item"
          :key="index"
        >
          <van-card
            :price="item.retailPrice.toFixed(2)"
            :desc="item.brief"
            :title="item.name"
            class="goods-card"
            :thumb="item.picUrl"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              @click="delColl(item, index)"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { NavBar, SwipeCell, Card, Button, Toast, Tab, Tabs } from "vant";

import { getCollect, addOrDelCollect } from "@/network/index.js";
export default {
  name: "Collect",
  data() {
    return {
      collectList: [],
      projectList: [],
      active: 0,
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [SwipeCell.name]: SwipeCell,
    [Card.name]: Card,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    openItem(item) {
      // console.log(item);
      this.$router.push({
        name: "GoodsDetail",
        query: {
          id: item.valueId,
        },
      });
    },
    // 获取收藏
    async takeCollect(type) {
      const info = {
        type: 0,
        page: 99,
      };
      const {
        data: { data },
      } = await getCollect(info);
      this.collectList = data.list;
    },
    //删除收藏
    async delColl(item, index) {
      // console.log(index);
      const info = {
        type: 0,
        id: item.valueId,
      };
      const { data } = await addOrDelCollect(info);
      // console.log(res);
      if (data.errno === 0) {
        Toast.success("删除成功");
        this.collectList.splice(index, 1);
      }
    },
    async tabChange(name, title) {
      // console.log(name);
      // console.log(title);
      if (name === 0) {
        // console.log('收藏');
        this.takeCollect();
      } else {
        const info = {
          type: 1,
          page: 99,
        };
        const {
          data: { data },
        } = await getCollect(info);
        this.projectList = data.list;
      }
    },
  },
  created() {
    this.takeCollect(0);
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.delete-button {
  height: 100%;
}
.coll-item {
  margin-bottom: 10px;
}
</style>

